<template>
  <div class="wms-merchant-balance-search">
    <ElCard shadow="never" class="search-card">
      <ElForm
        ref="searchFormRef"
        :model="searchForm"
        :inline="true"
        label-width="80px"
        class="search-form"
      >
        <ElRow :gutter="16">
          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="商户名称" prop="merchantName">
              <ElInput
                v-model="searchForm.merchantName"
                placeholder="请输入商户名称"
                clearable
                @keyup.enter="handleSearch"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="商户编码" prop="merchantCode">
              <ElInput
                v-model="searchForm.merchantCode"
                placeholder="请输入商户编码"
                clearable
                @keyup.enter="handleSearch"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="余额范围" prop="balanceRange">
              <ElSelect
                v-model="searchForm.balanceRange"
                placeholder="请选择余额范围"
                clearable
                @change="handleBalanceRangeChange"
              >
                <ElOption label="全部" value="" />
                <ElOption label="正余额" value="positive" />
                <ElOption label="零余额" value="zero" />
                <ElOption label="负余额" value="negative" />
                <ElOption label="自定义范围" value="custom" />
              </ElSelect>
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24" v-if="showCustomRange">
            <ElFormItem label="余额区间" prop="customBalance">
              <div class="balance-range-inputs">
                <ElInputNumber
                  v-model="searchForm.minBalance"
                  placeholder="最小值"
                  :precision="2"
                  size="small"
                  style="width: 45%"
                />
                <span class="range-separator">-</span>
                <ElInputNumber
                  v-model="searchForm.maxBalance"
                  placeholder="最大值"
                  :precision="2"
                  size="small"
                  style="width: 45%"
                />
              </div>
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="状态" prop="status">
              <ElSelect
                v-model="searchForm.status"
                placeholder="请选择状态"
                clearable
              >
                <ElOption label="正常" :value="1" />
                <ElOption label="冻结" :value="0" />
              </ElSelect>
            </ElFormItem>
          </ElCol>

          <ElCol :lg="12" :md="16" :sm="24" :xs="24">
            <ElFormItem label="创建时间" prop="createTimeRange">
              <ElDatePicker
                v-model="searchForm.createTimeRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :lg="12" :md="8" :sm="24" :xs="24">
            <ElFormItem>
              <ElButton type="primary" @click="handleSearch">
                <ElIcon><Search /></ElIcon>
                搜索
              </ElButton>
              <ElButton @click="handleReset">
                <ElIcon><Refresh /></ElIcon>
                重置
              </ElButton>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";

defineOptions({ name: "WmsMerchantBalanceSearch" });

// Props
const filter = defineModel<{
  merchantName?: string;
  merchantCode?: string;
  minBalance?: number;
  maxBalance?: number;
  status?: number;
  createTime?: string[];
}>("filter", { required: true });

// Emits
const emit = defineEmits<{
  search: [params: any];
  reset: [];
}>();

// 搜索表单
const searchForm = reactive({
  merchantName: "",
  merchantCode: "",
  balanceRange: "",
  minBalance: undefined as number | undefined,
  maxBalance: undefined as number | undefined,
  status: undefined as number | undefined,
  createTimeRange: [] as string[],
});

// 是否显示自定义余额范围
const showCustomRange = computed(() => {
  return searchForm.balanceRange === "custom";
});

// 监听外部过滤条件变化
watch(
  filter,
  (newFilter) => {
    Object.assign(searchForm, {
      merchantName: newFilter.merchantName || "",
      merchantCode: newFilter.merchantCode || "",
      minBalance: newFilter.minBalance,
      maxBalance: newFilter.maxBalance,
      status: newFilter.status,
      createTimeRange: newFilter.createTime || [],
    });
  },
  { immediate: true, deep: true },
);

// 余额范围变化处理
const handleBalanceRangeChange = (value: string) => {
  switch (value) {
    case "positive":
      searchForm.minBalance = 0.01;
      searchForm.maxBalance = undefined;
      break;
    case "zero":
      searchForm.minBalance = 0;
      searchForm.maxBalance = 0;
      break;
    case "negative":
      searchForm.minBalance = undefined;
      searchForm.maxBalance = -0.01;
      break;
    case "custom":
      // 保持用户输入的值
      break;
    default:
      searchForm.minBalance = undefined;
      searchForm.maxBalance = undefined;
  }
};

// 搜索处理
const handleSearch = () => {
  const searchParams = {
    merchantName: searchForm.merchantName,
    merchantCode: searchForm.merchantCode,
    minBalance: searchForm.minBalance,
    maxBalance: searchForm.maxBalance,
    status: searchForm.status,
    createTime:
      searchForm.createTimeRange.length > 0
        ? searchForm.createTimeRange
        : undefined,
  };

  // 更新外部filter
  Object.assign(filter.value, searchParams);
  emit("search", searchParams);
};

// 重置处理
const handleReset = () => {
  searchForm.merchantName = "";
  searchForm.merchantCode = "";
  searchForm.balanceRange = "";
  searchForm.minBalance = undefined;
  searchForm.maxBalance = undefined;
  searchForm.status = undefined;
  searchForm.createTimeRange = [];

  Object.assign(filter.value, {
    merchantName: "",
    merchantCode: "",
    minBalance: undefined,
    maxBalance: undefined,
    status: undefined,
    createTime: undefined,
  });
  emit("reset");
};
</script>

<style lang="scss" scoped>
.wms-merchant-balance-search {
  margin-bottom: 16px;

  .search-card {
    :deep(.el-card__body) {
      padding: 16px;
    }
  }

  .search-form {
    margin-bottom: -10px;

    .el-form-item {
      margin-bottom: 16px;
    }

    .balance-range-inputs {
      display: flex;
      align-items: center;
      width: 100%;

      .range-separator {
        margin: 0 8px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}
</style>
